<template>
	<div class="header">
		<div class="header-left">
			<h1>公考同盟</h1>
			<p>专业申论批改系统</p>
		</div>
		<div class="header-right">
			<span>已批改: {{ 11 }}+</span>
		</div>
	</div>
	<el-card shadow="always" :body-style="{ padding: '20px' }">
		<div>
			<el-form :model="query" inline>
				<el-form-item label="标题">
					<el-input v-model="query.title" />
				</el-form-item>
				<el-form-item label="用户名">
					<el-input v-model="query.userName" />
				</el-form-item>
				<el-form-item label="教师名">
					<el-input v-model="query.teacherName" />
				</el-form-item>
				<el-form-item label="状态">
					<el-select style="width: 140px" v-model="query.status" clearable>
						<el-option label="批改中" value="2" />
						<el-option label="批改完成" value="3" />
					</el-select>
				</el-form-item>
				<!-- 时间 -->
				<el-form-item label="创建时间">
					<el-date-picker value-format="YYYY-MM-DD HH:mm:ss"  v-model="query.createTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="getSlListData">查询</el-button>
					<el-button @click="resetQuery">重置</el-button>
				</el-form-item>
			</el-form>
			<el-table border stripe :data="slList" style="width: 100%">
				<el-table-column prop="title" label="标题" />
				<el-table-column prop="userName" label="用户名" />
				<el-table-column prop="teacherName" label="教师名">
					<template #default="scope">
						<el-tag type="primary">{{ scope.row.teacherName }}</el-tag>
					</template>
				</el-table-column>

				<el-table-column prop="status" label="状态">
					<template #default="scope">
						<el-tag :color="getStatusColor(scope.row.status)" effect="dark">{{
							statusType[scope.row.status]
						}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间">
					<template #default="scope">
						<span>{{ formatDate(scope.row.createTime) }}</span>
					</template>
				</el-table-column>

				<el-table-column prop="action" label="操作" width="300" align="center">
					<template #default="scope">
						<el-button type="primary" @click="handlePreview(scope.row)">
							去批改
						</el-button>
						<!-- 批改完成 -->
						<el-button type="success" @click="handleBatch(scope.row)">
							批改完成
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				class="pagination"
				v-model:current-page="query.pageNum"
				v-model:page-size="query.pageSize"
				:total="total"
				@size-change="getSlListData"
				@current-change="getSlListData"
				background
				layout="->,total, sizes, prev, pager, next, jumper"
			/>
		</div>
	</el-card>
	<el-drawer v-model="previewdialogVisible" title="批改" size="100%"  :with-header="false">
		<el-alert title="每批改一道题，保存一次" show-icon center type="info" effect="dark"> </el-alert>

		<pg @close="previewdialogVisible = false" :testId="currentRow.id" />
	</el-drawer>
</template>

<script setup lang="ts">
import { getSlList, getTeacherList, assignTeacher, correctTest } from '../api/slpg';
import { ref, onMounted, computed } from 'vue';
import { ElMessage } from 'element-plus';
import pg from './components/pg.vue';
import { statusType, getStatusColor, formatDate } from '../utils';

const slList = ref([]);
const total = ref(0);
const query:any = ref({
	pageNum: 1,
	pageSize: 10,
	title: '',
	userName: '',
	teacherName: '',
	status: '',
	createTime: ''
});
const selectedRows = ref<any>([]);
const previewdialogVisible = ref(false);
const currentRow = ref<any>(null);
const userInfo = ref<any>(null);

const handleBatch = row => {
	correctTest(row.id).then((res: any) => {
		if (res.code === 200) {
			ElMessage.success('批改完成');
			getSlListData();
		} else {
			ElMessage.error('批改失败');
		}
	});
};
const getSlListData = async () => {
	let startTime = '';
	let endTime = '';
	if (query.value.createTime) {
		startTime = query.value.createTime[0];
		endTime = query.value.createTime[1];
	}
	const res = await getSlList(query.value, startTime, endTime);
	slList.value = res.data.records;
	total.value = res.data.total;
};

const handlePreview = row => {
	currentRow.value = row;

	previewdialogVisible.value = true;
};

onMounted(() => {
	const userInfoObj = JSON.parse(localStorage.getItem('userInfo') as string) ;
	userInfo.value = userInfoObj;
	query.value.teacherId = userInfoObj.userId;
	getSlListData();
});

const resetQuery = () => {
	query.value = {
		pageNum: 1,
		pageSize: 10,
		title: '',
		userName: '',
		teacherName: '',
		status: '',
		createTime: ''
	};
	getSlListData();
};
</script>

<style lang="scss" scoped>
.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #1e50a2;
	color: white;
	padding: 10px 20px;
	margin-bottom: 20px;
	border-radius: 4px;

	.header-left {
		h1 {
			margin: 0;
			font-size: 24px;
		}

		p {
			margin: 5px 0 0;
			font-size: 14px;
		}
	}

	.header-right {
		display: flex;
		gap: 20px;

		span {
			font-size: 16px;
		}
	}
}

.pagination {
	margin-top: 20px;
}
.teacher-list {
	display: flex;
	flex-wrap: wrap;
}
</style>
